import React from 'react';
import { Link } from 'react-router-dom';
import toFixed from 'shared/utils/toFixed'
import { fetchPromotionList } from '../api';
import './index.less';

const re = require('static/re.png');
const xin = require('static/xin.png');

export default class Promotion extends React.PureComponent {
  state = {
    listData: []
  }
  componentDidMount() {
    fetchPromotionList().then(({ data: { list } }) => {
      this.setState({ listData: list })
      // this.timera=setInterval(function(){
      //   var day=Math.floor(expires/(86400))
      //   var hour = Math.floor(expires/3600)%24
      //   var min = Math.floor(expires/60) % 60
      //   var sec = expires % 60
      //   document.querySelector('#day').innerHTML = `${day}天${hour}小时${min}分钟${sec}秒`
      //   expires--
      //   if(expires<=0){
      //     clearInterval(this.timera)
      //   }
      // }, 1000)
    })
  }

  componentWillUnmount() {
    clearInterval(this.timera)
  }
  render() {
    const { listData } = this.state;
    return (
      <div className="promotion-container">
        <div className="promotion-header">
          <span className="promotion-header-title">限时促销</span>
          {/* <div className="timer">
            <span>距离活动结束还有：</span>
            <span>
              <span id="day">0</span>
            </span>
          </div> */}
        </div>
        <div className="promotion">
          <div className="promotion-content">
            {
              listData.map((item, index) => (
                <Link
                  key={index}
                  to={`/ProductDetail/${item.product_id}/buyProductDetail`}
                  className="promotion-content-item"
                  onClick={() => { gloablMonitor(['首页-促销产品', item.title]) }}
                >
                  <span>{item.title}</span>
                  <div className="promotion-content-item-img">
                    <img src={item.image} alt="" />
                  </div>
                  <span className="rawprice">建议零售价:￥{toFixed(item.rawprice)}</span>
                  <span className="price">会员价 ￥{toFixed(item.price)}</span>
                  {
                    item.ishot === "1" &&
                    <img className='promotion-content-item-re' src={re} alt="" />
                  }
                  {
                    item.isnew === "1" &&
                    <img className='promotion-content-item-xin' src={xin} alt="" />
                  }
                </Link>
              ))
            }
          </div>
        </div>
      </div>
    );
  }
}